メッセージを1文字ずつ表示し、さらに点滅させる
今回、紹介するテクニックは、前回の「メッセージを1文字ずつ表示する」と前々回の「メッセージを点滅させる」を組み合わせた文字の表示方法です。つまり、最初に文字を1文字ずつ表示させ、全ての文字が表示されたら文字を点滅させる、という技です。
「メッセージを1文字ずつ表示する」「メッセージを点滅させる」の講座を参考にしながら、解説を読み進めてください。

→ まずはサンプルを確認してください
 
メッセージを1文字ずつ表示し、さらに点滅させる


→ 変数の初期設定と、1文字ずつの表示させる関数の作成
 
最初に、JavaScriptで使用する変数の初期設定を行います。
以下の4つの変数を設定してください。
  1. テキストボックスに表示させる文字列(message)
  2. その文字数(mn)
  3. 文字数の初期値(n)
  4. 表示区分(kubun)
新しく登場した変数(kubun)は、文字表示のコントロール用として利用します。

値を0→1→2→3→4と変化させ、
値が0のときは文字を1文字ずつ表示、
1または3のときは文字を全て消す、
2または4のときは文字を全て表示させる。

このようにして、1文字ずつの表示と点滅を実現させます。

次は、「メッセージを1文字ずつ表示する」と同様に、変数(kubunn)が「0」の場合に、文字を1文字ずつ表示させる関数を自作します。

そして、すべての文字が表示されたら(n==mn)、変数(kubun)の値を「1」に変更するようにしておきます。
<SCRIPT language="JavaScript">
<!--
message = "HP素材の配布を開始しました!";
mn =message.length;
n = 0;
kubun = 0;

function tentype(){
  if(kubun==0){
    document.form1.tbox1.value = message.substring(0,n)+"_";
    if(n==mn){n=0;kubun=1} else{n=n+1}
  }
}

// -->
</SCRIPT>
  • 変数(message)には、テキストボックスに表示させる文字すべてを設定します。
  • 変数(mn)は、プロパティ「length」を使用して、変数(message)の文字数を自動的に取得するようにします。
  • 変数(n)は、最初に表示される文字の数、つまり「0」を設定します。
  • 変数(kubun)は、処理ステップの初期値「0」を設定します。
  • 上記に示した自作関数「tentype()」は、(kubun)が「0」の場合の処理だけが記述されています。


→ 文字の点滅部分を作成する
 
続いて、文字を点滅させる部分の関数を作成します。
「メッセージを点滅させる」をご参照ください。)

変数(kubun)の値が、「1」または「3」のときは文字を表示させない
「2」または「4」のときは変数(message)の文字を表示させるように、「else if」で処理を追加します。

各処理の最後では、変数(kubun)の値を1つ増加させ、次回に関数が呼び出されたとき次のステップへと進むようにしておきます。
なお、変数(kubun)の値が「5」まで増加した場合は、その値を「0」に戻す処理の記述を忘れないでください。
<SCRIPT language="JavaScript">
<!--
message = "HP素材の配布を開始しました!";
mn =message.length;
n = 0;
kubun = 0;

function tentype(){
  if(kubun==0){
    document.form1.tbox1.value = message.substring(0,n)+"_";
    if(n==mn){n=0;kubun=1} else{n=n+1}
  }
  else if(kubun==1 || kubun==3){
    document.form1.tbox1.value = "";
    kubun=kubun+1
  }
  else if(kubun==2 || kubun==4){
    document.form1.tbox1.value = message;
    kubun=kubun+1;
    if(kubun==5){kubun=0}
  }
}

// -->
</SCRIPT>
  • 上記は、手順1で作成中であった自作関数「tentype()」を完成させたものです。
  • 変数(kubun)の条件分岐を「kubun==1」または「kubun==3」とする場合は、2つの条件式を理論演算子「||」で結び付けます。
  • 変数(kubun)が「kubun==2」または「kubun==4」の場合の処理では、変数(kubun)の値が「5」ではなく「0」に戻るように、「if(kubun==5){kubun=0}」を追加しておきます。


→ 自作関数を呼び出す間隔を設定する
 
あとは、今までどおり、ファームを使ってテキストボックスを作成し(JavaScritで使用している名前と同じ名前をつけること)、自作関数「tentype()」を定期的に呼び出す「setInterval」を設定します。

以上で、“1文字ずつの表示”と“文字の点滅”を組み合わせたメッセージ表示は完成です。
<FORM name="form1">
<INPUT type="text" size="40" name="tbox1">
</FORM>
<SCRIPT language="JavaScript">
<!--
setInterval("tentype()",200);
// -->
</SCRIPT>
  • フォームおよびテキストボックスは、自作のJavaScript関数「tentype()」内で使用したのと同じ名前にしてください。ここでは、フォームの名前を「form1」、テキストボックスの名前を「tbox1」としています。
  • この例では、「setInterval」を使って0.2秒おきに自作のJavaScript関数「tentype()」を呼び出しています。なお、SCRIPTタグでJavaScriptの宣言を行うのを忘れないようにしてください。

yVoC[UNLIMIT1~] ECir|C Yahoo yV LINEf[^[z500~`I


z[y[W NWbgJ[h COiq O~yz COsI COze